<template>
   <div>
      <van-cell >
         <div slot="title">
            <div class="order-info">
   <img
         :src="ordersImg"
         alt="Service"
         class="service-image"
   />
   <span class="order-service">{{ orders.name }}</span><br>
   <span class="order-technician" style="font-size: 15px; color: #666666">技师：{{ orders.tname }}</span><br>
   <span class="order-duration"><van-icon name="clock-o" />{{ orders.minutes }}分钟</span>
   <span class="order-price5">¥{{ orders.price }}</span>
            </div>
         </div>
      </van-cell>

      <div>
      <p>服务评价<van-rate v-model="value" /></p>
      <p>技师评价<van-rate v-model="value1" /></p>
      </div>

      <div class="evaluation-container">
         <van-field
    v-model="evaluationText"
    placeholder="您对我们的服务还满意吗？请填写您对本次服务的评价"
    maxlength="200"
    :show-word-limit="true"
         />
      </div>

     <div class="button-group-container">
       <button
           v-for="(buttonText, index) in buttonTexts"
           :key="index"
           :class="buttonStyles[index]"
           :style="{ backgroundColor: buttonColors[index] }"
       >
         {{ buttonText }}
       </button>
     </div>

     <van-button type="primary" class="van-submit" @click="submit">提交评价</van-button>

   </div>
</template>

<script>
import axios from "axios";
import OrderItem from './OrderItem.vue';
import {CountDown} from "vant";
export default {
   components: {
      [CountDown.name]: CountDown,
      OrderItem
   },
   props: ['order'],
   data() {
      return {
        buttonTexts: ['手法专业', '着装规范', '服务态度好', '热情礼貌', '价格合理', '素质高'],
        buttonColors: ['#e2f3e2', '#e2f3e2', '#e2f3e2', '#e2f3e2', '#e2f3e2', '#e2f3e2'],
        buttonStyles: ['button-tag-style1'],
         evaluationText: '',
         value: 3,
         value1:4,
   orderId: null ,
         orders:{},
         ordersImg: 'https://pro-wjy.oss-cn-beijing.aliyuncs.com/2024/10/31/9b602a990f2b4b03af964228be8d4fa8.png',
      };
   },
   methods: {
      findAll(orderId) {
         console.log("00000"+orderId)
         axios.get(`http://localhost:10086/particulars/findById/${orderId}`).then(res => {

            this.orders = res.data[0];
            console.log(res.data[0])
         });
      },
     changeButtonStyle() {
       // 这里简单地切换为另一种样式，实际应用中可以有更多逻辑
       this.buttonStyles = ['button-tag-style2'];
     },
     submit(){
        this.$router.push('/submit')
     }


      },
   created() {
      const orderId = this.$route.query.orderId;
      console.log(orderId);
      if (orderId) {
         this.findAll(orderId);
      } else {
         console.error('未找到订单ID');
      }
   }
};
</script>

<style>
.order-price5 {
   float: right;
   font-size: 20px;
   color: red;
}
.evaluation-container {
   padding: 20px;
}
.button-group-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 20px;
}
.button-tag-style1 {
  border: none;
  border-radius: 20px;
  padding: 10px 20px;
  color: #333;
  cursor: pointer;
  font-size: 14px;
}
.button-tag-style2 {
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 8px 16px;
  color: #555;
  cursor: pointer;
  font-size: 13px;
}
.van-submit{
  margin-left: 40px;
  width: 300px;
  height: 50px;
  font-size: 25px;
  margin-top: 20px;
}
</style>
